<template>
  <view id="my-center" class="my-center">
    <tm-tabs
      :list="navbar.items"
      :width="750"
      :height="300"
      :default-name="1"
      item-model="line"
      active-color="primary"
      active-font-color="primary"
    >
    </tm-tabs>
    <cv-icon></cv-icon>

    <cv-swipe-action
      :height="a.height * 2 - 100"
      @scrolltolower="scrolltolower"
    >
      <cv-swipe-action-item
        v-for="item in order.pageList"
        :key="item.orderId"
        :right-width="150"
        :index="item.orderId"
        :is-show="isShow"
        @touchmove-handle="touchmoveHandle"
      >
        <view class="li">
          <view class="title">
            <view class="order-number">{{ item.serialNumber }}</view>
            <view class="goods-name">{{ item.merchantName }}</view>

            <view class="state-box">
              {{ orderState(item.orderState) }}
            </view>
          </view>
          <view class="xian"></view>

          <view class="context">
            <view class="left">
              <view class="p" style="margin-top: 0">
                <text class="lable">商品:</text>
                <view class="txt">{{
                  goodsFormat(item.goodsInfo.goods.sku)
                }}</view>
              </view>
              <view class="p">
                <text class="lable">总计:</text>
                <view class="txt price">{{ item.orderAmount }}元</view>
              </view>
              <view class="p">
                <text class="lable">时间:</text>
                <view class="txt">{{ item.createTime }}</view>
              </view>
            </view>
            <view class="right">
              <view class="sl">树懒专送</view>
              <view class="pj">评价</view>
            </view>
          </view>
        </view>

        <template #action>
          <view class="action" @click="deleteOrderHandle(item.orderId)"
            >删除</view
          >
        </template>
      </cv-swipe-action-item>
    </cv-swipe-action>
    <view v-if="order.pageList.length === 0" class="result">
      <tm-result :show-btn="false"></tm-result
    ></view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  getCurrentInstance,
} from 'vue'

import { onShow } from '@dcloudio/uni-app'

import { useResize } from '@/hook'
import { orderService } from '@/api'
import { computed } from 'vue'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

onMounted(() => {
  //initUserOrderPageList()
})

onShow(() => {
  order.pageList = []
  order.page = 1
  initUserOrderPageList()
})

const order = reactive({
  pageList: [] as Array<any>,
  page: 1,
  size: 5,
})
const initUserOrderPageList = async () => {
  const res = (await orderService.getUserOrderPageList({
    page: order.page,
    size: order.size,
  })) as any
  console.log(res.data.list)
  order.pageList = [...order.pageList, ...res.data.list]
}
const scrolltolower = (e: any) => {
  order.page++
  initUserOrderPageList()
}

const orderState = computed(() => {
  return (state: number) => {
    let msg = ''

    switch (state) {
      case 0:
        msg = '待付款'
        break

      case 1:
        msg = '已付款'
        break

      case 2:
        msg = '配送中'
        break

      case 3:
        msg = '已完成'
        break
      default:
        break
    }
    return msg
  }
})

const goodsFormat = computed(() => {
  return (item: Array<any>) => {
    let msg = ''

    item.forEach((v) => {
      msg += `${v.name}x${v.number} `
    })
    return msg
  }
})

const navbar = reactive({
  items: [
    {
      key: 1,
      title: '点单',
    },
    {
      key: 2,
      title: '评价',
    },
    {
      key: 3,
      title: '商家',
    },
  ],

  current: 1,
})

const RefSwipeAction = ref()
const options = reactive({
  list: [
    {
      text: '取消',
      style: {
        backgroundColor: '#007aff',
      },
    },
    {
      text: '确认',
      style: {
        backgroundColor: '#dd524d',
      },
    },
  ],
})

let a = useResize('#my-center', getCurrentInstance(), (res) => {
  console.log(res, 'res')
})
console.log(a, 'aaaa')

const deleteOrderHandle = (e: any) => {
  console.log(e)

  uni.showModal({
    title: '确定删除此订单信息吗?',
    success: (res) => {
      const { confirm } = res
      if (confirm) {
        console.log(e)
      }
    },
  })
}

const w = 110
const isopen = ref(true)
const action = ref([
  { text: '操作', color: 'black' },
  { text: '删除按钮', color: 'green', icon: 'tmicon-delete' },
])
function onclick(item: any, index: number) {
  console.log(item, index)
  uni.showToast({
    title: `点击${item.text}`,
  })
}

const isShow = ref(-1)
function touchmoveHandle(index: number) {
  console.log(index)
  isShow.value = index
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.ul {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx;
}

.li {
  width: 100%;
  height: auto;
  background-color: #fff;
  box-sizing: border-box;
  padding: 25rpx;
  border-radius: 10rpx;

  .title {
    display: flex;
    align-items: center;
    position: relative;

    .goods-name {
      font-weight: 700;
      font-size: 0.9rem;
      margin: 0 20rpx;
    }

    .state-box {
      position: absolute;
      right: 0rpx;
    }
    .order-number {
      width: 45rpx;
      height: 45rpx;
      border: 1rpx solid #4fb7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
    }
  }

  .context {
    width: 100%;
    display: flex;
    margin-top: 20rpx;

    .left {
      width: 75%;

      .p {
        margin: 20rpx 0;
        display: flex;
        .lable {
          width: 100rpx;
          font-weight: 700;
        }
        .txt {
          color: #18191b;
        }
        .price {
          color: red;
        }
      }
    }
    .right {
      width: 25%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .sl {
        width: auto;
        background-color: #4fb7ff;
        color: #fff;
        padding: 10rpx 15rpx;
        border-radius: 10rpx;
      }

      .pj {
        width: 100rpx;
        height: 50rpx;
        background-color: coral;
        border-radius: 10rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
      }
    }
  }
}

.result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.action {
  width: 100%;
  height: 100%;
  background-color: #c42b1c;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
